<template>
    <el-dialog
      ref="treeDialog"
      :visible.sync="isShow"
      width="1000px"
      custom-class="dialog-class"
      append-to-body
      top="3vh"
      :fullscreen="fullscreen"
      @close="handlerClose"
      :close-on-click-modal="false"
    >
      <div slot="title" class="dialog-title">
        <span>{{title}}</span>
        <i class="s-icon"
          :class="{
            'el-icon-full-screen': !fullscreen,
            'el-icon-copy-document': fullscreen,
          }"
          @click="fullscreen = !fullscreen"
        ></i>
      </div>
      <el-container>
        <el-main style="overflow: visible">
          <div class="opera-body">
            <div class="opera-table">
              <el-form
                class="query-form"
                :model="queryParams"
                ref="queryForm"
                :inline="true"
                label-width="68px"
                size="small"
              >
              <el-row>
                <el-col :span="8">
                    <el-form-item
                      :label="$t('task.Inphase')"
                      prop="Inphase"
                    >
                      <el-cascader
                        v-model="queryParams.Inphase"
                        :options="tableData"
                        :props="{label:'Inphase',value:'InphaseV'}" 
                        size="small"
                        :show-all-levels="false"
                      ></el-cascader>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item :label="$t('task.taskname')" prop="taskname">
                    <el-input
                      v-model="queryParams.taskname"
                      :placeholder="$t('task.taskname')"
                      clearable
                      size="small"
                      @keyup.enter.native="handleQuery"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item :label="$t('task.taskdescription')" prop="taskdescription">
                    <el-input
                      v-model="queryParams.taskdescription"
                      :placeholder="$t('task.taskdescription')"
                      clearable
                      size="small"
                      @keyup.enter.native="handleQuery"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item :label="$t('task.Responsiblerole')" prop="Responsiblerole">
                    <el-select
                      v-model="queryParams.Responsiblerole"
                      :placeholder="$t('task.Responsiblerole')"
                      clearable
                      style="width: 100%"
                      size="small"
                    >
                      <el-option
                        v-for="(item, index) in roleOp"
                        :key="index"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <div class="searchAres searchAresHeng">
                    <el-form-item size="small" style="  ">
                      <el-button
                        class="green-btn"
                        type="primary"
                        icon="el-icon-search"
                        size="mini"
                        @click="handleQuery"
                      >{{ $t("public.search") }}</el-button
                      >
                      <el-button
                        icon="el-icon-refresh"
                        size="mini"
                        @click="resetQuery"
                      >{{ $t("public.reset") }}</el-button
                      >

                    </el-form-item>
                  </div>
                </el-col>
              </el-row>
                
              </el-form>
              <div class="section-body">
                          <div class="data-wrap">
                            <h5>已添加:</h5>
                            <div class="data-content">
                              <el-tag
                                v-if="data.length > 0"
                                v-for="(item, index) in data"
                                :key="index"
                                class="mr10"
                                size="mini"
                                :disable-transitions="transition"
                                closable
                                @close="removeTag(item, index)"
                                >{{ item.taskname }}</el-tag
                              >
                              <span v-if="data.length == 0" class="holder-select">请选择</span>
                            </div>
                          </div>
                <el-table
                  height="342"
                  stripe
                  ref="table"
                  :data="tableData"
                  @row-click="rowClick"
                  @selection-change="selectionChange"
                  style="width: 100%"
                >
                  <el-table-column type="selection" width="55" align="center" />
                  <el-table-column
                    :label="$t('public.serialNum')"
                    type="index"
                    align="center"
                  >
                    <template slot-scope="scope">
                      <span>{{
                          (queryParams.pageNum - 1) * queryParams.pageSize +
                          scope.$index +
                          1
                        }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="Inphase"
                    label="所在阶段"
                  >
                    <template slot-scope="scope">
                      <div class="allstage">
                        <span
                          :class="scope.row.InphaseV == '1' ? 'stages stageone' : ''"
                        ></span>
                        <span
                          :class="scope.row.InphaseV == '2' ? 'stages stagetwo' : ''"
                        ></span>
                        <span
                          :class="
                            scope.row.InphaseV == '3' ? 'stages stagethree' : ''
                          "
                        ></span>
                        <span
                          :class="
                            scope.row.InphaseV == '4' ? 'stages stagefour' : ''
                          "
                        ></span>
                        <span>{{ scope.row.Inphase }}</span>
                      </div>
                    </template>
                    
                  </el-table-column>
                  <el-table-column
                    prop="taskmodel"
                    label="任务类型"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="taskname"
                    label="任务名称"
                    align="center"
                  >
                    <template slot-scope="scope">
                      <u class="tname">{{ scope.row.taskname }}</u>
                    </template>
                  </el-table-column>
                  
                  <el-table-column width="150" prop="taskdescription"  label="任务描述">
                  </el-table-column>

                  <el-table-column prop="Responsiblerole"  label="责任角色">
                  </el-table-column>
                  <el-table-column width="180" prop="exportation"  label="输出物">
                  </el-table-column>
                </el-table>
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :page-sizes="[10, 20, 50, 100]"
                  :small="true"
                  background
                  style="text-align: right; margin: 8px 0 0"
                  layout=" prev, pager, next, sizes"
                  :total="total"
                >
                </el-pagination>
              </div>

            </div>
          </div>
        </el-main>
        <el-footer height="34px">
          <div class="dialog-footer">
            <el-button @click="cancel" size="small" icon="el-icon-close">{{
              $t("public.close")
            }}</el-button>
            <el-button
              type="primary"
              @click="submitForm"
              size="small"
              icon="el-icon-check"
              >{{ $t("btn.submit") }}</el-button
            >
          </div>
        </el-footer>
      </el-container>
    </el-dialog>

</template>
<script>
/**
 * 人员按部门多选组件
 * author: fenghuan@enjoysoftware.cn
 * date: 2022/02/16
 * use: <enjoy-person-dropdown v-model="persons"> </enjoy-person-dropdown>
 * person: [{id:1,name:'张三'}, ...]
 */
import { listUser } from "@/api/system/user";
import { treeselect } from "@/api/system/dept";
import { find, forEach } from "lodash";
export default {
  name: "EnjoyUserTreeDialog",
  props: {
    /* 外部v-model传入的人员 例如：v-model=[{id:1,name:'张三'}] */
    value: {
      type: Array,
      default: undefined,
    },
    visible: {
      type:Boolean,
      default:false
    },
    title: {
      type: String,
      default: '新增人员'
    },
  },
  computed:{
    isShow:{
      get(){
        return this.visible
      },
      set(){}
    }
  },
  data() {
    return {
      fullscreen: false, // 是否全屏
      // 部门树选项
      deptOptions: undefined,
      defaultProps: {
        children: "children",
        label: "label",
      },
      // 部门名称
      deptName: undefined,
      data: [], //已选择项
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        Inphase:[],
        taskname: undefined,
        taskdescription: undefined,
        Responsiblerole: undefined,

      },
      roleOp: [
        {label:"项目经理",value:"1"},
        {label:"研发代表",value:"2"},
        {label:"工艺代表",value:"3"},
        {label:"PQA",value:"4"},
        {label:"可靠性代表",value:"5"},
        {label:"验证代表",value:"6"},
        {label:"现场质量代表",value:"7"},
        {label:"采购代表",value:"8"},
        {label:"交付代表",value:"9"},
        {label:"客服代表",value:"10"},
      ],
      transition: true,
      total: 0, // 表格数据总数
      values: [], // 输入框选择值
      tableData: [], // 表格数据
      inputHeight: 32, //输入框高度
    };
  },
  watch: {
    visible(newVal, oldVal) {
      if (newVal) {
        /** 查询部门下拉树结构 */
        this.getTreeselect();
        /** 查询人员列表 */
        this.getList();
      }
    },
    // 根据名称筛选部门树
    deptName(val) {
      this.$refs.tree.filter(val);
    },
  },
  created() {
    /** 初始化值 */
    this.dataInit();
  },
  mounted() {
    /** 监听文本框内容高度 */
    // this.domInit();
  },
  methods: {
    handlerClose(e){
      this.$emit('update:visible',false)
      this.resetDialog()
    },
    dataInit() {
      /** 初始化值*/
      let array = [];
      if (Array.isArray(this.value) && this.value.length > 0) {
        forEach(this.value, (value, key) => {
          array.push({ userId: value.id, userName: value.name });
        });
      }
      this.values = array;
      this.data = [...array];
    },
    domInit() {
      const self = this;
      /** 监听文本框内容高度*/
      const observer = new ResizeObserver((entries) => {
        entries.forEach((entry) => {
          const cr = entry.contentRect;
          self.inputHeight = (cr.height || 24) + 8;
        });
      });
      observer.observe(this.$refs.el_select__tags);
    },
    getList() {
      const self = this;
      this.tableData = [{
          id: 1,
          tasknumber: 1,
          Inphase: "项目计划和定义",
          InphaseV: "1",
          editnow:false,
          taskmodel:"普通任务",
          taskmodelV:'1',
          taskname:"任务名称1",
          taskdescription:"定义可用性需求",
          Responsiblerole:"系统工程师",
          exportation:"可用性和Benchmark需求",
          Triggedorder:"DFMEA",
          keytask:"1",//0否 1是
          Review:"1",//0否 1是
          begin:"2022-04-01",
          end:"2022-12-31",
          taskcreator:"管理员",
          taskcreateTime:"2022-03-01",
          tasktype:"进行中",
          tasktypeV:"2",//1未下发 2进行中 3已完成 4逾期
        }, {
          id:2,
          tasknumber:2,
          Inphase: "产品设计和开发",
          InphaseV: "2",
          editnow:false,
          taskmodel:"GR",
          taskmodelV:'2',
          taskname:"任务名称2",
          taskdescription:"定义可用性需求",
          Responsiblerole:"系统工程师",
          exportation:"可用性和Benchmark需求",
          Triggedorder:"DFMEA",
          keytask:"1",//0否 1是
          Review:"1",//0否 1是
          begin:"2022-04-01",
          end:"2022-12-31",
          taskcreator:"管理员",
          taskcreateTime:"2022-03-01",
          tasktype:"未下发",
          tasktypeV:"1",//1未下发 2进行中 3已完成 4逾期
        }
      ];
      this.total = 10;
      this.$nextTick(function () {
        self.data.forEach((row, index) => {
          const tableRow = find(
            this.tableData,
            (o) => o.userId == row.id
          );
          self.$refs.table.toggleRowSelection(tableRow || row, true);
        });
      });
    },
    rowClick(row, column, event) {
      this.$refs.table.toggleRowSelection(row);
    },
    selectionChange(selection) {
      this.$nextTick(function () {
        this.data = selection;
      });
    },
    handleSizeChange(size) {
      this.queryParams.pageSize = size;
      this.getList();
    },
    handleCurrentChange(page) {
      this.queryParams.pageNum = page;
      this.getList();
    },
    remove(row, index) {
      this.values.splice(index, 1);
      this.$refs.table.toggleRowSelection(row, false);
    },
    removeTag(row, index) {
      this.data.splice(index, 1);
      this.$refs.table.toggleRowSelection(row, false);
    },
    /* 输出外部的数据，例如：[{id:1,name:'张三'}] */
    exportData(data) {
      let array = [];
      if (Array.isArray(data)) {
        forEach(data, (value, key) => {
          array.push({ id: value.userId, name: value.userName });
        });
      }
      return array;
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    /** 查询部门下拉树结构 */
    getTreeselect() {
      treeselect().then((response) => {
        this.deptOptions = response.data;
      });
    },
    cancel() {
      this.handlerClose()
    },
    submitForm() {
      this.values = [...this.data];
      this.$emit("input", this.exportData(this.data));
      this.$emit("change", this.exportData(this.data));
      this.handlerClose()
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    resetDialog(){
      this.deptName = undefined
      this.data = []
      this.resetForm("queryForm");
      this.$refs.table.clearSelection()
    }
  },
};
</script>

<style lang="scss" scoped>
.allstage {
  .stages {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 5px;
    vertical-align: middle;
    margin-top: -2px;
  }
  .stageone {
    background: #535862;
  }
  .stagetwo {
    background: #20b09f;
  }
  .stagethree {
    background: #0b7be3;
  }
  .stagefour {
    background: #e3a50b;
  }
}
.dialog-title {
  width: calc(100% - 20px);

  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dialog-title span {
  font-size: 14px;
}
::v-deep .el-dialog__header .el-dialog__headerbtn {
  top: 10px;
}
.data-content {
  border: 1px solid #dcdfe6;
  border-radius: 5px;
  padding: 3px 10px 3px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  min-height: 30px;
  box-sizing: border-box;
}
.data-content .el-tag{
  background-color: white;
  border-color:#EDEDF2;
  color: #535862;
  padding:0 10px;
  margin:1px 10px 1px 0!important;
  line-height: 19px;
  border-radius: 2px;
}
.data-content ::v-deep .el-tag .el-tag__close{
  color: #535862;
  font-size: 16px;
  vertical-align: -3px;
}
.data-content ::v-deep .el-tag .el-tag__close:hover{
  background-color: transparent;
}
::v-deep .el-dialog__body {
  padding: 10px 24px;
  height: 524px;
}
.data-wrap{
  margin-bottom: 10px;
}
.data-wrap h5 {
  margin: 0;
  line-height: 30px;
  font-weight: bold;
}
.opera-body {
  display: flex;
  height:100%;

}
.opera-dept {
  width: 240px;
  margin-right: 10px;
  flex-shrink: 0;
  border-radius: 4px;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15);
}
.opera-title{
  padding: 0 10px;
  height: 30px;
  line-height: 30px;
  color:#333;
  font-size: 12px;
  border-bottom: 1px solid #E5E5E5;
  font-weight: 600;
}
.head-container{
  padding:10px;
}
.opera-table {
  width: 100%;
}
.opera-table ::v-deep .el-form-item__label {
  font-size: 12px;
}
.query-form {
  padding: 10px !important;
  border-radius: 4px;
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.08);
}
::v-deep .el-form-item--small.el-form-item {
  margin-bottom: 10px;
}
::v-deep .data-content .el-tag {
  margin: 3px 10px 3px 0;
}
::v-deep .dialog-class {
  height: 700px !important;
}
.dialog-footer {
  text-align: center;
  margin: 10px 0;
}

::v-deep .el-header,
::v-deep .el-main,
::v-deep .el-footer {
  padding: 0;
}
::v-deep .el-main {
  overflow-x: hidden;
}
::v-deep .el-header {
  height: auto !important;
}
::v-deep .el-footer {
  padding-top: 7px;
}
::v-deep .el-container {
  height: 504px;
}
::v-deep .el-dropdown,
::v-deep .el-select {
  display: block;
}
.holder-select {
  color: #c6c6c6;
  font-size: 12px;
}
.section-body{
  padding: 0 10px 10px 10px;
  margin-top: 10px;
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.08);
}
.green-btn{
  background-color: #20B09F;
  border: 1px solid #20B09F;
}
 ::v-deep .el-input-group__append{
  background-color: var(--current-color);
   color:white;
   cursor: pointer;
}

 .head-folder-icon img{
   display: inline-block;
   width: 12px;
   height: 12px;
 }
 

</style>
